<template>
  <div id="discuss" style="width: 1100px;margin-left: 15%">
    <el-tabs v-model="activeName" @tab-click="TabhandleClick">
      <el-tab-pane label="课程讨论" name="first">
        <el-input v-model="input" placeholder="新建话题" @click.native="handleClick"></el-input>
        <div v-show="show" style="margin-top: 20px;">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="textarea1">
          </el-input>
          <div style="margin-top: 10px">
            <el-button plain size="small" icon="el-icon-plus">添加附件</el-button>
            <el-button plain size="small" icon="el-icon-plus">添加录音</el-button>
            <el-button type="success" size="small" icon="el-icon-check" @click="release()">发布</el-button>
            <el-button type="info" plain size="small" icon="el-icon-plus" @click="handleClick">取消</el-button>
          </div>
        </div>
        <div style="margin-top: 80px">
          <ul style="list-style: none;width: 100%">
            <li v-for="(discuss,index) in discusses" style="border-bottom: 1px solid #b3b3b3;padding-bottom: 20px">
              <img :src="require(`@/assets/${discuss.userHead}`)" style="width: 80px;border-radius: 100%;float: left"
                   @click="discussId(index)">
              <div style="margin-left: 100px">
                <p>
                  <span style="color:#7a9e31;">{{ discuss.userName }}&nbsp;</span>
                  <span style="font-size: 10px">{{ discuss.gmtCreate }}</span>
                </p>
                <h3>{{ discuss.courseTalkTitle }}</h3>
                <el-button type="success" plain @click="addgreat(index)">赞({{ discuss.great }})</el-button>
                <el-button type="success" plain @click="todiscussInfo(index)">回复</el-button>
              </div>
            </li>
          </ul>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Discuss",
  data() {
    return {
      show: false,
      activeName: 'first',
      discusses: [],
      input: '',
      textarea1: '',
      courseTalkId: '',
      great: '',
    }
  },
  methods: {
    handleClick() {
      this.show = !this.show
    },
    TabhandleClick() {
      console.log(tab, event);
    },
    discussId(index) {
      console.log(index);
    },
    addgreat(index) {
      this.discusses[index].great++;
      this.courseTalkId = this.discusses[index].courseTalkId
      this.great = this.discusses[index].great
      axios('/course/savegreat', {
        params: {
          courseTalkId: this.courseTalkId,
          great: this.great
        },
        method: 'post'
      }).then(res => {
        console.log(res.data)
      }).catch(function (error) {
        console.log(error);
      });
    },
    release() {
      axios('/course/addtalk', {
        params: {
          courseId: localStorage.getItem('courseIndex'),
          courseTalkTitle: this.input,
          courseTalkContent: this.textarea1,
          userId: localStorage.getItem('userId')
        },
        method: 'post'
      }).then(res => {
        location.reload()
      }).catch(function (error) {
        console.log(error);
      });
    },
    todiscussInfo(index) {
      let info = {
        courseTalkTitle: this.discusses[index].courseTalkTitle,
        courseTalkNumber: this.discusses[index].courseTalkNumber,
        userName: this.discusses[index].userName,
        gmtCreate: this.discusses[index].gmtCreate,
        great: this.discusses[index].great,
        userHead: this.discusses[index].userHead,
        courseTalkContent: this.discusses[index].courseTalkContent
      }
      this.$store.commit('updatediscussInfo', info)
      this.$router.push('discussinfo')
    }
  },
  mounted() {
    axios('/course/talk', {
      params: {
        courseId: localStorage.getItem('courseIndex')
      },
      method: 'get'
    }).then(res => {
      console.log(res.data)
      this.discusses = res.data.data
    }).catch(function (error) {
      console.log(error);
    });
  },
}
</script>

<style scoped>

</style>
